<template>
	<view class="contain">
		<view class="park_list" @click="goDetail(parkList[0])">
			<image class="item_pic" :src="parkList[0].CoverImg" mode=""></image>
		</view>
		<view class="park_list" @click="goDetail(parkList[1])">
			<image class="item_pic" :src="parkList[1].CoverImg" mode=""></image>
		</view>

		<!-- 一日游两日游三日游 -->
		<view class="content_com qxlj_back2">
			<view class="title">推荐路线</view>
			<view class="flex_between tab_box">
				<view :class="['item_view', index === 2 ? 'item_item_active' : '']"
					@click="getDetail(parkList[2].Id,2)">
					{{parkList[2].Title}}
				</view>
				<view :class="['item_view', index === 3 ? 'item_item_active' : '']"
					@click="getDetail(parkList[3].Id,3)">
					{{parkList[3].Title}}
				</view>
				<view :class="['item_view', index === 4 ? 'item_item_active' : '']"
					@click="getDetail(parkList[4].Id,4)">
					{{parkList[4].Title}}
				</view>
			</view>
			<view class="">
				<mp-html :content="touristMsg.ChineseSubstance" @linkTap="golinkTap" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getChildren,
		getArticleDetail
	} from '@/api/homePage.js';
	export default {
		data() {
			return {
				parkList: [],
				index: 2,
				touristMsg: '',
			}
		},
		onLoad() {
			// this.postData();
			this.getGLDate();
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$category.appName, //分享的名称
				path: '/pages/index/parkList',
				mpId: this.$category.appid //此处配置微信小程序的AppId
			}
		},

		methods: {
			golinkTap(e){
				console.log(e)
			},
			async getDetail(id, index) {
				this.index = index;
				try {
					const {
						Data
					} = await getArticleDetail({
						Id: id
					})
					this.touristMsg = Data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//跳转详情界面
			goDetail(e) {
				if (e.LinkUrl == null) return;
				if (e.LinkUrl == '/') {
					uni.showToast({
						title: '暂未开放',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (e.LinkUrl.includes('http') || e.LinkUrl.includes('https')) {
					uni.navigateTo({
						url: '/pages/webView/webView?url=' + e.LinkUrl
					})
					return;
				}
				if (e.LinkUrl.includes('pages/')) {
					uni.navigateTo({
						url: e.LinkUrl
					})
					return;
				};
			},
			//根据站点获取文章信息
			async getGLDate() {
				try {
					const Data = await getChildren({
						ArticleCategoryId: 3581,
					})
					this.parkList = Data.Data;
					console.log(this.parkList)
					this.getDetail(this.parkList[2].Id);
				} catch (e) {

				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.contain {
		width: 100%;
		height: 100vh;
		padding: 4%;
		padding-top: 2%;
		background-color: #F5F5F5;
	}

	.park_list {
		width: 100%;
		border-radius: 20rpx;
		height: 200rpx;
		margin-bottom: 30rpx;

		.item_pic {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.content_com {
		padding: 4%;
		border-radius: 7px;

		.title {
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.tab_box{
			margin-bottom: 20rpx;
		}

		.item_view {
			width: 30%;
			background-color: #ECF4FF;
			padding: 2%;
			text-align: center;
			color: #000;
			border-radius: 40rpx;
			font-size: 28rpx;
		}

		.item_item_active {
			background-color: #498FFF;
			color: #fff;
			font-weight: bold;
		}
	}
</style>